<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <title>注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        #box{
            width: 100vw;
            height: 100vh;
            background: url("img/login_bg.jpg") center top;
            background-size: cover;
            display: flex;
            align-items: center;
        }
        ul{
            width: 100%;
            background: rgba(255,255,255,.5);
            border-radius: .1rem;
            padding: 1rem;
            line-height: 3;
        }
        ul li{
            list-style: none;
            margin-bottom: .5rem;
            display: flex;
            background: white;
            border-radius: .1rem;
        }
        ul li p{
            font-weight: bold;
            width: 40%;
            border-right: 1px solid #e6e6e6;
            padding: .1rem .2rem;
            text-align: center;
        }
        ul li span, ul li input{
            flex: 1;
            padding-left: 1rem;
            border: none;
        }
        .tijiao{
            background: #317db7;
            color: white;
            border-radius: .1rem;
            text-align: center;
            margin-bottom: 1rem;
        }
        .download{
            background: #efab50;
            color: white;
            border-radius: .1rem;
            text-align: center;
        }
        .toast{position:fixed;padding:.5rem;font-size:.25rem;background:rgba(0,0,0,.7);color:#fff;border-radius:.1rem;left:50%;transform: translateX(-50%);z-index: 99;bottom:-100%;animation: ani_bot .7s forwards;display: none;}
        @keyframes ani_bot {
            0%{bottom:-100%;opacity: 0;}
            50%{bottom:10%;opacity: 1;}
            70%{bottom:8%;opacity: 1;}
            100%{bottom:9%;opacity: 1;}
        }
    </style>
</head>
<body class="flex">
<div id="box">
<ul>
    <li >
        <p>*推荐人</p>
        <span id="tuijian" ></span>
    </li>
    <li >
        <p >*账号</p>
        <input id="account" type="text" placeholder="请填写账号">
    </li>
    <li >
        <p >*登入密码</p>
        <input id="loginPwd" type="password" placeholder="请填写登入密码">
    </li>
    <li >
        <p >*确认登入密码</p>
        <input id="loginPwd2" type="password" placeholder="请确认登入密码">
    </li>
    <li>
        <p >*二级密码</p>
        <input id="secPwd" type="password" placeholder="请填写二级密码">
    </li>
    <li >
        <p >*确认二级密码</p>
        <input id="secPwd2" type="password" placeholder="请确认二级密码">
    </li>
    <li >
        <p>*联系手机</p>
        <input id="zcphone" type="text" placeholder="请填写联系手机">
    </li>

    <li class="tijiao" onclick="tijiao()"><span>提交注册信息</span></li>
    <li class="download " onclick="download()"><span>下载客户端</span></li>

</ul>
</div>
<!--alert-->
<div class="toast "></div>
<script>

    var code = 'admin';
    $("#tuijian").text(code);
    function tijiao() {
        var account = $("#account").val();
        var loginPwd = $("#loginPwd").val();
        var loginPwd2 = $("#loginPwd2").val();
        var secPwd = $("#secPwd").val();
        var secPwd2 = $("#secPwd2").val();
        var zcphone = $("#zcphone").val();
        if(account==''||loginPwd==''||loginPwd2==''||secPwd==''||secPwd2==''||zcphone==''){
            $(".toast").text('请填写完整信息').show();
            setTimeout(function () {
                $(".toast").hide();
            },2000)
        }
        else if(loginPwd != loginPwd2){
            $(".toast").text('二次登录密码不一致').show();
            setTimeout(function () {
                $(".toast").hide();
            },2000)
        }
        else if(secPwd != secPwd2){
            $(".toast").text('二次二级密码不一致').show();
            setTimeout(function () {
                $(".toast").hide();
            },2000);
        }
        else{
            var data = {
                code: code,
                account: account,
                password: loginPwd,
                password_2: secPwd,
                zcphone: zcphone
            };
            $.ajax({
                type: 'post',
                data: data,
                dataType: 'json',
                url: 'http://hkjd.zgzyph.com/index/Register/index',
                success: function (res) {
                    console.log(res);
                    $(".toast").text(res.msg).show();
                    setTimeout(function () {
                        $(".toast").hide();
                    },2000);
                    if(res.data.status == 1){

                    }
                }
            })
        }

    }
</script>

</body>
</html>